<template>
    <u-popup :show="show" @close="close" :closeable="true" closeIconPos="top-left" :closeOnClickOverlay="false">
        <text class="title">请选择小区</text>
        <view class="content">
            <u-search v-model="name" :showAction="false" :focus="true" shape="square" @clear="clearKeyword" @change="searchLocation"></u-search>
            <u-gap height="5"></u-gap>
            <scroll-view class="_scrolley" scroll-y>
                <!--<view class="_position">-->
                    <!--<image src="/static/icon/dww.png" mode=""></image>-->
                    <!--<text>上海市-嘉定区</text>-->
                <!--</view>-->
                <radio-group @change="changeHandler">
                    <label class="danxuan" v-for="(item,index) in locationList" :key="index">
                        <text>{{item.name}}</text><radio :value="item.name"/>
                    </label>
                </radio-group>
            </scroll-view>
            <u-gap height="5"></u-gap>
            <u-button type="primary" text="下一步" @click="nextHandler"></u-button>
        </view>
    </u-popup>
</template>

<script>
    export default {
        name: "SelectLocation",
        props: {
            show:{
                type:Boolean,
                default:function () {
                    return true;
                }
            },
            locationName:{
                type:String,
                default:function () {
                    return '';
                }
            },
            locationLng:{
                type:String,
                default:function () {
                    return '';
                }
            },
            locationLat:{
                type:String,
                default:function () {
                    return '';
                }
            },
            locationAddress:{
                type:String,
                default:function () {
                    return '';
                }
            }
        },
        data() {
            return {
                locationList:[],
            }
        },
        methods: {
            close() {
                this.$emit('cancel', '');
                uni.navigateBack({
                    delta: 1,
                });
            },
            searchLocation(name){
                uni.$u.http.get('/api.php/index/map_search', {params: {key: name}}).then(res => {
                    this.locationList = res;
                }).catch(err => {
                    uni.showToast({
                        title: err.data, //提示文字
                        duration: 3000, //显示时长
                        icon: "none", //图标，支持"success"、"loading"
                    });
                })
            },
            clearKeyword(){
                this.$emit('update:locationName', '');
            },
            changeHandler(name){
                for (let i = 0; i < this.locationList.length; i++) {
                    if (this.locationList[i].name === name.detail.value){
                        this.$emit('update:locationName', this.locationList[i].name);
                        this.$emit('update:locationLng', this.locationList[i].location.lng);
                        this.$emit('update:locationLat', this.locationList[i].location.lat);
                        this.$emit('update:locationAddress', this.locationList[i].address);
                    }
                }
            },
            nextHandler(){
                if (this.locationName === ''){
                    uni.showToast({
                        title: '请选择小区', //提示文字
                        duration: 1500, //显示时长
                        icon: "error", //图标，支持"success"、"loading"
                    });
                } else {
                    this.$emit('cancel', '');
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .title{
        font-size: 36rpx;
        margin: 20rpx auto;

    }
    .content{
        padding: 20rpx;
    }

    ._scrolley{
        width: 100%;
        height: 70vh;
        .danxuan{
            display: inline-block;
            width: 100%;
            height: 60rpx;
            line-height: 60rpx;
            border-bottom: 1px solid #dcdcdc;
            margin-top: 20rpx;
            radio{
                float: right;
                display: inline-block;
                transform: scale(0.6);
            }
        }
        ._position{
            width: 100%;
            height: 50rpx;
            // background-color: #dedede;
            image{
                width: 40rpx;
                height: 40rpx;
            }
            text{
                display: inline-block;
                margin-left: 10rpx;
                width: 80%;
                height: 50rpx;
                line-height: 50rpx;
                // background-color: red;
                overflow: hidden;
            }
        }
    }

</style>